<template>
  <div class="cover-img-box" :class="coverSizeClass" :style="`background-image:url(${coverSrc})`" @click="clickImg">
    <img :src="coverSrc" :class="imgClass" class="c-w100 c-h c-object-fit-c c-backdrop-filter-blur20" alt="">
  </div>
</template>
<script>
import { DEFAULT_IMG_MAP } from '@/utils/constant.js';
export default {
  components: {},
  props: {
    coverUrl: {
      type: String,
      default: ''
    },
    prodType: {
      type: String,
      default: 5
    },
    coverSizeClass:{
      type: String,
      default: 'c-w100 c-h'
    },
    imgClass:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
    };
  },
  computed: {
    coverSrc() {
      return encodeURI(this.coverUrl) || DEFAULT_IMG_MAP[this.prodType] || DEFAULT_IMG_MAP[5]
    }
  },
  methods: {
    clickImg() {
      this.$emit("clickImg");
    },
  },
  activated() { }
};
</script>
<style scoped>
.cover-img-box{
  background-size: 120%;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.3);
  background-position: center center;
}
</style>